import React from 'react';
import { Text, View } from 'react-native';
import styles from './styles';

export default ({
  title,
  index,
  text,
  children,
}) => {
  const level = index ? index.toString().split('.').length - 1 : 0;
  return (
    <View>
      <View style={styles.wrap}>
        {index !== undefined ?
          <Text style={[styles.index, level === 0 && styles.index0 ]}>{index}</Text> :
          null
        }
        <View style={styles.content}>
          {title ? <Text style={styles[`title${level}`]}>{title}</Text> : null}
          {text ? <Text style={styles.text}>{text}</Text> : null}
        </View>
      </View>
      {children}
    </View>
  )
}